<template>
    <!--v-if是在div中使用的-->
    <div>
        <el-row :gutter="20" class="first">
            <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
            <el-col :span="8">
                <div class="grid-content bg-purple">
                    <el-input v-model="userName" placeholder="请输入用户名" clearable></el-input>
                </div>
            </el-col>
            <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
            <el-col :span="8">
                <div class="grid-content bg-purple">
                    <el-input v-model="password" placeholder="请输入密码" show-password></el-input>
                </div>
            </el-col>
            <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
        </el-row>
        <el-row :gutter="460" class="button-thr">
            <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
            <el-col :span="8">
                <div class="grid-content bg-purple">
                    <el-button :plain="true" @click="logOnClick">点击登录</el-button>
                </div>
            </el-col>
            <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
        </el-row>
    </div>
</template>

<script>
    export default {
        name: "login",
        data() {
            return {
                userName: '',
                password:'',
            }
        },
        mounted() {
            /*依据路由来判定*/

        },
        methods:{
            logOnClick(){
                if(this.userName=="user"&&this.password=="123"){
                    /*直接进入首页*/
                    this.$router.replace({path:"/task"}).catch(err => err);
                }else{
                    this.$message({
                        message: '请输入正确的用户名和密码',
                        type: 'warning'
                    })
                }
            }
        }
    }
</script>

<style scoped>
    @import url("//unpkg.com/element-ui@2.15.5/lib/theme-chalk/index.css");
    .first {
        margin-top: 180px;
        margin-bottom: 20px;
    }
    .grid-content {
        border-radius: 4px;
        min-height: 36px;
    }
    .button-thr{
        margin-top: 30px;
    }
</style>